<template>
  <div class="login_g">
    <div class="login_box">
      <p class="login_title">
        <span :class="isActiveIndex === 0 ? 'isActiveTitle' : ''" @click="accountLogin">账号登录</span>
        <!-- 利用三元运算符判定点击了哪个登录,从而绑定样式 -->
        <span :class="isActiveIndex === 1 ? 'isActiveTitle' : ''" @click="smsLogin">短信登录</span>
      </p>
      <el-form v-if="isActive" ref="loginForm" :model="loginForm" label-width="80px">
        <el-form-item label="账号：">
          <el-input v-model="loginForm.account" placeholder="请输入账号"><i
            class="el-icon-edit el-input__icon"
            slot="suffix"
            @click="handleIconClick">
          </i></el-input>
        </el-form-item>
        <el-form-item label="密码：">
          <el-input v-model="loginForm.pwd" placeholder="请输入密码"></el-input>
        </el-form-item>
        <p class="login_agree">
          <el-checkbox>我已阅读并同意<a style="color: #2f2ff4;">《用户服务协议》</a>、<a style="color: #2f2ff4;">《隐私权政策》</a>
          </el-checkbox>
        </p>
        <el-button class="login_btn">立 即 登 录</el-button>
        <p style="text-align:right;margin-top:10px"><a style="color: #2f2ff4;">忘记密码？</a></p>
        <p style="text-align:center;margin-top:40px">第三方登录 或 <a style="color: #2f2ff4;">立即注册</a></p>
      </el-form>
      <el-form v-else ref="loginForm2" :model="loginForm2" label-width="80px">
        <el-form-item label="手机号：">
          <el-input v-model="loginForm2.phone" placeholder="请输入手机号"><i
            class="el-icon-edit el-input__icon"
            slot="suffix"
            @click="handleIconClick">
          </i></el-input>
        </el-form-item>
        <el-form-item label="验证码：">
          <el-input v-model="loginForm2.verifyCode" style="width:60%" placeholder="请输入验证码"></el-input>
          <el-button class="getSmsCode">获取验证码</el-button>
        </el-form-item>
        <p class="login_agree">
          <el-checkbox>我已阅读并同意<a style="color: #2f2ff4;">《用户服务协议》</a>、<a style="color: #2f2ff4;">《隐私权政策》</a>
          </el-checkbox>
        </p>
        <el-button class="login_btn">立 即 登 录</el-button>
        <p style="text-align:right;margin-top:10px"><a style="color: #2f2ff4;">忘记密码？</a></p>
        <p style="text-align:center;margin-top:40px">第三方登录 或 <a style="color: #2f2ff4;">立即注册</a></p>
      </el-form>
    </div>
  </div>
</template>


<script>
  export default {
    name: 'Login1',
    data() {
      return {
        isActive: true, // 用于实现切换登录，作为判断
        isActiveIndex: 0,
        loginForm: {
          account: '',
          pwd: ''
        },
        loginForm2: {
          phone: '',
          verifyCode: ''
        }
      }
    },
    methods: {
      accountLogin() { // 账号登录
        this.isActive = true
        this.isActiveIndex = 0
      },
      smsLogin() { // 短信登录
        this.isActive = false
        this.isActiveIndex = 1
      },
      handleIconClick(ev) {
        console.log(ev);
      }
    }
  }
</script>


<style scoped>
  .login_g {
    min-height: 800px;
    padding: 100px 0 0 640px;
    background-color: #f4f4f4
  }

  .login_box {
    /*width: 450px;*/
    width: 370px;
    height: 400px;
    background-color: #fff;
    border-radius: 18px;
    padding: 30px 50px 30px 30px;
  }

  .login_title {
    text-align: center;
    margin: 30px 30px 40px 30px;
    font-size: 24px;
    color: #666;
  }

  .login_title span {
    margin: 0 20px 0 20px;
    cursor: pointer;
  }

  .login_title span:hover {
    color: #333;
    font-weight: bolder;
  }

  .isActiveTitle {
    color: #333;
    font-weight: bolder;
  }

  .login_agree {
    margin-left: 30px;
  }

  .login_btn {
    width: 100%;
    height: 50px;
    margin: 0 0 0 10px;
    background-color: #0cb95f;
    color: #fff;
  }

  .getSmsCode {
    margin-left: 22px;
  }
  p_style{
    text-align:right;margin-top:10px
  }
  p_style_one{
    text-align:center;margin-top:40px
  }
</style>
